/**
自定义 Openlayers 渐变色样式
*/
<template>
    <div>
        <div ref="map" id="map"></div>
        <!--  <div class="btns">
              <button @click="showStyle('circle')">显示样式circle</button>
              <button @click="showStyle('icon')">显示样式icon</button>

              <button @click="addMarkers">添加自定义图标</button>
          </div>-->
        <div id="mouse-position"></div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, View, Feature} from "ol";
    import TileLayer from "ol/layer/Tile";
    import XYZ from "ol/source/XYZ";
    import {Vector as VectorSource} from "ol/source";
    import {Vector as VectorLayer} from "ol/layer";
    import {Style, Stroke} from "ol/style";
    import {LineString} from "ol/geom";
    import {defaults, MousePosition} from "ol/control"
    import {createStringXY} from "ol/coordinate"
    import GradientLineStyle from './GradientLineStyle.js';

    export default {
        name: "AppGradientLineStyle",
        data() {
            // this.drawSource = null;
            return {
                map: null,
                drawSource: null,
            };
        },
        mounted() {
            // 创建地图
            this.initMap();
            this.drawSource = new VectorSource();
            this.map.addLayer(new VectorLayer({
                source: this.drawSource
            }));

            //添加过渡色线要素
            const feature = new Feature({
                geometry: new LineString([[113.5907, 34.7232], [113.7135, 34.7673]])
            });
            const style = new GradientLineStyle({
                color: 'red',
                color2: 'green',
                width2: 6,
                width: 6,
            });
            feature.setStyle(style);
            this.drawSource.addFeature(feature);
            console.log('样式一：', feature)

            //添加单色的普通线要素
            const feature2 = new Feature({
                geometry: new LineString([[113.7135, 34.7873], [113.6207, 34.8232]])
            });
            const style2 = new Style({
                stroke: new Stroke({
                    color: 'blue',
                    width: 6,
                }),

            });
            feature2.setStyle(style2);
            this.drawSource.addFeature(feature2);
        },
        methods: {
            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                // 创建MousePosition控件
                var mousePositionControl = new MousePosition({
                    coordinateFormat: createStringXY(4),      // 将坐标保留4位小数位，并转换为字符串
                    projection: 'EPSG:4326',                                // 定义投影
                    className: 'custom-mouse-position',                     // 控件的CSS类名
                    target: document.getElementById('mouse-position'),      // 将控件渲染在该DOM元素中
                    undefinedHTML: '&nbsp;'                                 // 鼠标离开地图时，显示空格
                });

                this.map = new Map({
                    target: "map",
                    controls: defaults().extend([mousePositionControl]),  // 将鼠标位置控件加入到地图默认控件中
                    view: new View({
                        center: [113.5, 34.7],
                        zoom: 10,
                        projection: "EPSG:4326",
                    }),
                });

                var gaodeLayer = new TileLayer({
                    source: new XYZ({
                        url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
                    })
                });
                this.map.addLayer(gaodeLayer);
            },
        }
    };

</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 20px;
        left: 0;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }

    .btns {
        position: fixed;
        top: 100px;
        left: 200px;
    }
</style>